<div id="browserPages" class="window">
  <div class="leftPanel scrollable">
    <div id="browserPageTree" class="tree pages">
      <%= page_tree(@pages,@pages[nil],
            :node_url => Proc.new{|p| skyline_article_article_version_url(p.id, p["default_variant_id"]) },
            :selected => @page, 
            :id_prefix => "browser_page") %>
    </div>
    <input id="browser_page_id" type="hidden" name="browser[referable_id]" value="<%= @page && @page.id %>">
    <input type="hidden" name="browser[referable_type]" value="Skyline::Page">
    <%=hidden_field_tag "browser[referable_title]", @page && @page.default_variant_data.andand.navigation_title || "", :id => "browser_page_referable_title" %>
    <input id="browser_page_url" type="hidden" name="browser[url]" value="<%= @page && @page.id %>">    
  </div>
  <iframe class="previewPanel preview" src="<%= @page && skyline_article_article_version_url(@page, @page.default_variant) || "javascript:''"  %>"></iframe>
</div>
<script type="text/javascript" charset="utf-8">  
  var f = function(){
    var mtp = new Skyline.HorizontalLayout("browserPages", {height: 200, hidden: true});
    var lp = mtp.addPanel(mtp.element.getElement(".leftPanel"),{width: 200});
    mtp.addSplitter();
    var ifr = mtp.addPanel(mtp.element.getElement(".previewPanel"));
    ifr = ifr.element;
    
    var bpi = $('browser_page_id');
    var bpt = $('browser_page_referable_title');
    var bpu = $('browser_page_url');    
    
    this.tree = new Skyline.Tree(mtp.element.getElement(".tree"),{
      draggable: false,
      orderable: false,
      dragMarker: false,
      offsetParent: lp.element,
      fixedRootNodes: true
    });
  
    this.tree.addEvent("select", function(event,target){
      if(event){
        event.stop(); 
        event.preventDefault();
      }
      var node = target.getParent("li");
      bpu.set("value",Application.getId(node.get("id")));
      bpi.set("value",Application.getId(node.get("id")));
      bpt.set("value",target.getProperty("title"));
      ifr.set("src",target.getProperty("href"));
    });  
  };
  f();
</script>
